<template>
<div>
    <div class="user_info_pane">
        <div class="description-pane">
            <div>
                <el-button type="primary" :icon="Edit" @click="clickTransfer">发起转账</el-button>
                <el-button type="primary" :icon="Edit" @click="dialogVisibleInsvert=true">充值</el-button>
            </div>
            <el-descriptions title="用户详细信息" border>
                <el-descriptions-item
                :rowspan="2"
                :width="140"
                label="Photo"
                align="center"
                >
                <el-image
                    style="width: 100px; height: 100px"
                    src="/img/user.png"
                />
                </el-descriptions-item>
                <el-descriptions-item label="账号">{{ username }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ phone }}</el-descriptions-item>
                <el-descriptions-item label="IDcard">{{ idCard }}</el-descriptions-item>
                <el-descriptions-item label="余额">
                <el-tag size="small">{{ money }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="用户id">
                    {{ userId }}
                </el-descriptions-item>
            </el-descriptions>
        </div>
        
        <div>
              <el-tabs
                    v-model="activeName"
                    type="card"
                    class="demo-tabs"
                    @tab-click="tabHandleClick"
                >
                <el-tab-pane label="收入" name="first">
                    <PayAccountIn ref="payAccountIn"></PayAccountIn>
                </el-tab-pane>
                <el-tab-pane label="支出" name="second">
                    <PayAccountOut ref="payAccountOut"></PayAccountOut>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 充值开始 -->
        <el-dialog
            v-model="dialogVisibleInsvert"
            title="充值"
            width="500px"
            >
            <el-input
                    v-model="moneyNum"
                    placeholder="请输入充值金额"
                    clearable
            >
            </el-input>
            <div class="hint">提示：只能输入数字（整数或小数）</div>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisibleInsvert = false">取消</el-button>
                <el-button type="primary" :disabled="isValidNumber" @click="InsvertMoney">
                    确认充值
                </el-button>
            </div>
            </template>
        </el-dialog>
        <!-- 充值结束 -->
         <el-dialog
            v-model="dialogVisibleTransfer"
            title="发起转账"
            width="800px"
            >
            <PayAccountSearch v-if="ifShowTrans" @transferRequest="transferRequest"></PayAccountSearch>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisibleTransfer = false">取消</el-button>
                <el-button type="primary" :disabled="isDisable" @click="enterTransfer">
                    确认转账
                </el-button>
            </div>
            </template>
        </el-dialog>
    </div>
</div>
</template>
<script setup>
import { computed, onMounted, onUnmounted, getCurrentInstance,ref,reactive,nextTick } from 'vue';
import { accountPayApi } from '@/api/apis/pay'
import PayAccountIn from '@/components/account/PayAccountIn.vue';
import PayAccountOut from '@/components/account/PayAccountOut.vue';
import PayAccountSearch from '@/components/account/PayAccountSearch.vue';
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const payAccountIn=ref(null);
const payAccountOut=ref(null);

const appName=ref('测试个人账户');
const phone=ref('');
const username=ref('');
const money=ref('');
const userId=ref('');
const idCard=ref('');
const tableData = ref([])
const activeName = ref('first');
 //充值
const dialogVisibleInsvert=ref(null);
const moneyNum=ref(0);
const dialogVisibleTransfer=ref(false);
const isDisable=ref(true);
const reqData=ref({});
//是否显示转账组件
const ifShowTrans=ref(true);

//点击开始转账
const clickTransfer=()=>{
    dialogVisibleTransfer.value=true;
    ifShowTrans.value=true;
}
//确认转账
const enterTransfer=()=>{
    accountPayApi.transferAccount(reqData.value).then((res)=>{
        if(res && res.code==0){
            dialogVisibleTransfer.value=false;
             ifShowTrans.value=false;
             getAccountInfo();
             payAccountOut.value.parentTableFlush();
             return ElMessage({
                message: res.msg,
                type: 'success',
             })
        }else{
             ElMessage({
                message:  res.msg,
                type: 'warning',
            })
        }
    })
}
//转账请求确认
const transferRequest=(data)=>{
    if(data.code){
        reqData.value=data.data;
        console.log(reqData.value);
        isDisable.value=false;
    }else{
        isDisable.value=true;
    }
}

//充值金额
const InsvertMoney=()=>{
    accountPayApi.insvertAccount(moneyNum.value).then((res)=>{
        if(res && res.code==0){
              moneyNum.value=0;
              getAccountInfo();
              dialogVisibleInsvert.value=false;
               payAccountIn.value.parentTableFlush();
              return ElMessage({
                message: res.msg,
                type: 'success',
             })
        }
    })
}

 // 计算属性：验证输入是否为有效数字
const isValidNumber = computed(() => {
    if (moneyNum.value === '') return true;
    if(moneyNum.value<=0) return true;
    
    // 使用正则表达式验证数字（包括整数和小数）
    const numberRegex = /^-?\d*\.?\d+$/;
    return !numberRegex.test(moneyNum.value);
});

const tabHandleClick = (tab,event) => {
  console.log(tab, event)
}
 nextTick(()=>{
    getAccountInfo();
 })
 //获取用户信息
 const getAccountInfo=()=>{
     //获取用户信息
    accountPayApi.payInfo().then((res)=>{
        username.value=res.userName
        money.value=res.userMoney
        userId.value=res.userId
        phone.value=res.userPhone;
        idCard.value=res.userIdcard;
    })
 }
 const handleClick = () => {
  console.log('click')
}
</script>
<style lang="css">

.user_info_pane{
    width: 100%;
    padding-left: 20px;
    padding-top: 20px;
    box-sizing: border-box;
    .description-pane{
        margin-bottom: 10px;
    }
    .item_Info{
        width: 100%;
        height: 30px;
        display: flex;
        align-items: center;
    }
}
</style>